<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
        <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
        <title>统战成员学习平台</title>
	    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
        <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    </head>
    <body>
    	<header class="red">
            <div class="ui_border_b">
                <span tapmode onclick="api.closeWin()" class="left"><i class="icon_back_white"></i></span>
                <p>课程详情</p>
            </div>
    	</header>
        <div id="lesson_app" style="display:none" v-show="true">
            <div class="title">
                <div class="main_img" :style="'background: #f3f3f3 url(\''+ imageBasePath + courseDetail.courseImg +'\') no-repeat top'"></div>
                <div class="mid">
                    <div><span class="btn_red" @click="study()">开始学习</span></div>
                </div>
            </div>
            <ul class="l_nav ui_border_b">
                <li @click="selectType(0)" :class="{'active': 0 === activeIndex}"><i class="icon_detail"></i>课程详情</li>
                <li @click="selectType(1)" :class="{'active': 1 === activeIndex}"><i class="icon_catalog"></i>目录</li>
                <li @click="selectType(2)" :class="{'active': 2 === activeIndex}"><i class="icon_comment"></i>评论</li>
            </ul>
        </div>
        <script type="text/javascript" src="../../script/api.js"></script>
        <script type="text/javascript" src="../../script/vue.min.js"></script>
        <script type="text/javascript" src="../../script/common.js"></script>
        <script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#lesson_app',
                data: {
                    imageBasePath: imageBasePath,
                    back: false,
                    click : false,
                    activeIndex: 0,
                    courseId: 0,
                    courseDetail: {}
                },
                mounted: function() {
                    var $this = this;
                    apiready = function() {
                        $this.back = api.pageParam.back;
                        $this.courseId = api.pageParam.courseId;
                        sbsm.opened();
                        api.parseTapmode();
                        $this.init();
                        // keyback event
                        api.addEventListener({
                            name: 'keyback'
                        }, function(ret, err){
                            if($api.getStorage(_.LSEESONCOMMENT)){
                                $api.rmStorage(_.LSEESONCOMMENT);
                                api.closeFrame({
                                    name: 'lesson_comment_frm'
                                })
                            } else {
                                closeWin()
                            }
                        });
                    }
                },
                methods: {
                    init: function() {
                        var $this = this;
                        post('/client/course/getDetail', {courseId: $this.courseId}, function(ret) {
							$this.courseDetail = ret.data;
                            $this.openFrameGroup();
                        })
                    },
                    openFrameGroup: function() {
                        var $this = this;
                        // fix header
                        var header = $api.dom('header');;
                        $api.fixStatusBar(header);
                        var lessonTop = document.querySelector('#lesson_app');
                        var height = $api.offset(header).h + $api.offset(lessonTop).h;
                        // open frameGroup
                        api.openFrameGroup ({
                            name: 'lessonDetailGroup',
                            preload: 3,
                            rect: {
                                 x: 0,
                                 y: height,
                                 w: 'auto',
                                 h: api.winHeight - height
                            },
                            frames: ['lesson_intro_frm', 'lesson_catalog_frm', 'lesson_comment_list_frm'].map(function(item, index) {
                                var param = {
                                    courseId: $this.courseDetail.courseId
                                }
                                if(index === 0) {
                                    param.courseName = $this.courseDetail.courseName;
                                    param.courseContent = $this.courseDetail.courseContent;
                                }
                                return {
                                    bounces: true,
                                    name: item,
                                    url: item + '.html',
                                    pageParam: param
                                }
                            })
                        }, function(ret, err){
                            $this.click ? $this.click = false : $this.activeIndex = ret.index;
                        });
                    },
                    selectType: function(i){
                        var $this = this;
                        if($this.activeIndex === i) return;
                        $this.click = true;
                        $this.activeIndex = i;
                        api.setFrameGroupIndex({
                            name : 'lessonDetailGroup',
                            scroll: true,
                            index : i
                        })
                    },
                    study: function() {
                        var $this = this;
                        if($this.back) {
                            closeWin();
                        } else {
                            api.openDrawerLayout({
                                name: 'study_win',
                                url: './study_win.html',
                                slidBackEnabled: false,
                                pageParam: {
                                    back: true,
                                    courseId: $this.courseId
                                },
                                leftPane: {
                                    pageParam: {
                                        hasHeader: true,
                                        courseId: $this.courseId
                                    },
                                    name: 'lesson_catalog_frm',
                                    url: './lesson_catalog_frm.html'
                                }
                            });
                        }
                    }
                }
            });

        </script>
    </body>
</html>
